<template>
  <section class="hold-transition login-page">
    <div v-if="tagClick === 1" style="height: 100%;">
      <div class="login-box">

        <!-- /.login-logo -->
        <div class="login-box-body">
          <div class="login-logo">
            <span style="color: #000;"><b>跨<span style="font-size: 38px;color: #E75E00;">e</span>通</b></span>
          </div>
          <!--<p class="login-box-msg">欢迎登录睿途 ERP+系统</p>-->
          <p class="login-box-msg text-red">{{errorMessage}}</p>
          <form @submit.prevent="login" method="post" action="">
            <div class="form-group has-feedback">
              <input type="text" class="form-control" v-model="formData.username" placeholder="请输入您的帐号">
              <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
              <input type="password" class="form-control" v-model="formData.password" placeholder="请输入您的密码">
              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
              <div class="form-group clearfix">
                <div class="col-xs-7">
                  <input type="text" class="form-control" v-model="formData.captcha" placeholder="请输入验证码">
                </div>
                <div class="col-xs-5">
                  <img style="width: 100%;height: 34px" :src='vCodeImg' alt="" @click="getVCode">
                </div>
              </div>
              <!-- /.col -->
              <div class="col-xs-12" style="text-align: right;">
                <button type="submit" class="btn btn-primary btn-block btn-flat" style="background-color: #409EFF; border-color: #d2d6de;" @click="login">登录</button>
                <a  class="btn btn-info btn-block btn-flat" style="background-color: #fff; color: #409EFF; border-color: #d2d6de; " @click="tagClick=2">立即入驻</a>
                <a style="color: #409EFF; width: 100%; margin-top: 10px;display: block;" @click="tagClick=3">忘记密码？</a>
              </div>
              <!-- /.col -->
            </div>
          </form>
          <!-- /.social-auth-links -->

        </div>
        <!-- /.login-box-body -->
      </div>

      <!--<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">-->
      <!--<div v-show="isshow" class="error"-->
      <!--style="position: fixed;top: 65px;left: 50%;width: 360px; margin-left: -180px;height: 160px; background: rgba(245,1,1,0.6);text-align: center;display: table;vertical-align: middle">-->
      <!--<p style="display: table-cell;vertical-align: middle;color: #FFF">-->
      <!--asdfasd-->
      <!--</p>-->
      <!--</div>-->
      <!--</transition>-->
      <!--<div id="box">-->
      <!--<transition name="fade">-->
      <!--<div class="error" v-show="isShow" transiton="fade">-->
      <!--<p>错误信息</p>-->
      <!--</div>-->
      <!--</transition>-->
      <!--</div>-->
    </div>

    <div v-else-if="tagClick === 2" style="height: 100%;">
      <div class="register-box">
        <div class="register-box-body">
          <div class="register-logo">
            <span style="color: #000;"><b>跨<span style="font-size: 38px;color: #E75E00;">e</span>通</b></span>
          </div>
          <!--<div class="error text-danger">-->
            <!--{{registerFormVerifyInfo.phone}}-->
            <!--{{registerFormVerifyInfo.password}}-->
            <!--{{registerFormVerifyInfo.passwordAgain}}-->
          <!--</div>-->
          <!--<form method="post" action="">-->
            <div class="form-group has-feedback">
              <input type="text" class="form-control" placeholder="手机" v-model="registerFormParams.phone" @focus="inputFouce">
              <span class="glyphicon glyphicon-phone form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
              <input type="password" class="form-control" placeholder="密码长度应介于6-16位之间"
                     v-model="registerFormParams.password" @focus="inputFouce">
              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
              <input type="password" class="form-control" placeholder="请再次输入密码"
                     v-model="registerFormParams.passwordAgain" @focus="inputFouce">
              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback clearfix">
                <div class="col-xs-7" style="padding: 0px;">
                  <input type="text" class="form-control" v-model="registerFormParams.randomCode" placeholder="验证码">
                </div>
                <div class="col-xs-5" style="padding-right: 0px;">
                  <button type="button" :style="{'color':bgColor}" :disabled="disabled" @click="sendCode" style="border-radius:5%; width: 100%;height: 34px; background-color: #F4F4F5; border: 1px solid #d2d6de; outline:none;">{{btnContent}}</button>
                </div>
            </div>
            <div class="row">
              <!-- /.col -->
              <div class="col-xs-12 text-center">
                <button type="button" class="btn btn-primary btn-block btn-flat" style="border-radius:2%; background-color: #409EFF; border-color: #d2d6de;" @click="submitForm">提交注册</button>
              </div>
              <!-- /.col -->
            </div>
          <!--</form>-->

          <div class="text-center margin">
            已有账号？
            <a @click="tagClick=1" class="text-center">
              立即登录>
            </a>
          </div>
        </div>
        <!-- /.form-box -->
      </div>
    </div>

    <div v-else style="height: 100%;">
      <div class="register-box">
        <div class="register-box-body">
          <div class="register-logo">
            <span style="color: #000;"><b>跨<span style="font-size: 38px;color: #E75E00;">e</span>通</b></span>
          </div>
          <!--<div class="error text-danger">-->
          <!--{{registerFormVerifyInfo.phone}}-->
          <!--{{registerFormVerifyInfo.password}}-->
          <!--{{registerFormVerifyInfo.passwordAgain}}-->
          <!--</div>-->
          <!--<form method="post" action="">-->
          <div class="form-group has-feedback">
            <input type="text" class="form-control" placeholder="手机" v-model="forgetFormParams.phone" @focus="inputFouce">
            <span class="glyphicon glyphicon-phone form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="password" class="form-control" placeholder="密码长度应介于6-16位之间"
                   v-model="forgetFormParams.password" @focus="inputFouce">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="password" class="form-control" placeholder="请再次输入密码"
                   v-model="forgetFormParams.passwordAgain" @focus="inputFouce">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback clearfix">
            <div class="col-xs-7" style="padding: 0px;">
              <input type="text" class="form-control" v-model="forgetFormParams.randomCode" placeholder="验证码">
            </div>
            <div class="col-xs-5" style="padding-right: 0px;">
              <button type="button" :style="{'color':forgetBgColor}" :disabled="forgetDisabled" @click="forgetSendCode" style="border-radius:5%; width: 100%;height: 34px; background-color: #F4F4F5; border: 1px solid #d2d6de; outline:none;">{{forgetBtnContent}}</button>
            </div>
          </div>
          <div class="row">
            <!-- /.col -->
            <div class="col-xs-12 text-center">
              <button type="button" class="btn btn-primary btn-block btn-flat" style="border-radius:2%; background-color: #409EFF; border-color: #d2d6de;" @click="forgetSubmitForm">修改密码</button>
            </div>
            <!-- /.col -->
          </div>
          <!--</form>-->

          <div class="text-center margin">
            已有账号？
            <a @click="tagClick=1" class="text-center">
              立即登录>
            </a>
          </div>
        </div>
        <!-- /.form-box -->
      </div>
    </div>
  </section>
</template>

<script>
  import baseURL from '@/js/common/baseURL';
  import axios from 'axios'
  import instance from '@/api/index.js'
  import {setCookie} from "../js/common/util";
  import { asyncRouterMap, constantRouterMap} from '@/router/index'
  import router from '@/router'

  export default {

    name: "login",
    data() {
      return {
        formData: {
          username: "",
          password: "",
          captcha: "",
        },
        token:'',
        vCodeImg:'',
        imgPre:'data:image/jpeg;base64,',
        registerFormParams: {},//注册表单传参
        forgetFormParams: {},//忘记密码表单传参
        flag: false,//提交状态
        registerFormVerify: {//验证状态
          phone: false,
          password: false,
          passwordAgain: false
        },
        registerFormVerifyInfo: {//验证错误提示信息
          phone: "",
          password: "",
          passwordAgain: ""
        },
        tagClick:1,
        errorMessage:'',
        btnContent: '获取验证码',
        disabled: false,
        bgColor: '#7B7B7B',
        time: 60,
        forgetBtnContent: '获取验证码',
        forgetDisabled: false,
        forgetBgColor: '#7B7B7B',
        forgetTime: 60,
      }
    },
    methods: {
      forgetSubmitForm: function () {
        //手机号验证
        var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        //密码验证
        var reg1 = /^[A-Za-z0-9]{6,16}$/;

        let vm = this;

        var r = reg.test(this.forgetFormParams.phone);
        var r1 = reg1.test(this.forgetFormParams.password);

        if (this.forgetFormParams.phone == null) {
          this.$message.error("请输入手机号");
          return;
        } else if (!r) {
          this.$message.error("您输入的手机号无效");
          return;
        }

        if (this.forgetFormParams.password == null) {
          this.$message.error("请输入密码");
          return;
        } else if (!r1) {
          this.$message.error("只能输入字母和数字且长度为6-16位");
          return;
        }

        if (this.forgetFormParams.passwordAgain == null) {
          this.$message.error("请输入密码");
          return;
        }else if (!r1) {
          this.$message.error("只能输入字母和数字且长度为6-16位");
          return;
        } else if (this.forgetFormParams.password != this.forgetFormParams.passwordAgain){
          this.$message.error("您输入的密码不一致");
          return;
        }

        if (this.forgetFormParams.randomCode == null) {
          this.$message.error("请输入验证码");
          return;
        }

        //验证通过请求ajax
        instance({
          method:'post',
          url:'/user/forget',
          data:vm.forgetFormParams
        }).then(function (data) {
          console.log(data)
          if(data.data.success){
            vm.tagClick = 1
            vm.forgetFormParams = {}
            vm.$message.success(data.data.msg);
          }else{
            vm.forgetFormParams.phone = true;
            vm.forgetFormParams.phone = "";
            this.$message.error("账户不存在");
            return;
          }
        })
      },

      submitForm: function () {
        //手机号验证
        var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        //密码验证
        var reg1 = /^[A-Za-z0-9]{6,16}$/;

        let vm = this;

        var r = reg.test(this.registerFormParams.phone);
        var r1 = reg1.test(this.registerFormParams.password);
        var r2 = reg1.test(this.registerFormParams.passwordAgain);

        if (this.registerFormParams.phone == null) {
          this.registerFormVerify.phone = true;
          this.registerFormVerifyInfo.phone = "";
          // this.registerFormVerifyInfo.phone = "请输入手机号";
          this.$message.error("请输入手机号");
          return;
        } else if (!r) {
          this.registerFormVerify.phone = true;
          this.registerFormVerifyInfo.phone = "";
          // this.registerFormVerifyInfo.phone = "您输入的手机号无效";
          this.$message.error("您输入的手机号无效");
          return;
        } else {
          this.registerFormVerify.phone = false;
        }

        if (this.registerFormParams.password == null) {
          this.registerFormVerify.password = true;
          this.registerFormVerifyInfo.password = "";
          // this.registerFormVerifyInfo.password = "请输入密码";
          this.$message.error("请输入密码");
          return;
        } else if (!r1) {
          this.registerFormVerify.password = true;
          this.registerFormVerifyInfo.password = "";
          // this.registerFormVerifyInfo.password = "只能输入字母和数字且长度为6-16位";
          this.$message.error("只能输入字母和数字且长度为6-16位");
          return;
        } else {
          this.registerFormVerify.password = false;
        }

        if (this.registerFormParams.passwordAgain == null) {
          this.registerFormVerify.passwordAgain = true;
          this.registerFormVerifyInfo.passwordAgain = "";
          // this.registerFormVerifyInfo.passwordAgain = "请输入密码";
          this.$message.error("请输入密码");
          return;
        }else if (!r1) {
          this.registerFormVerify.passwordAgain = true;
          this.registerFormVerifyInfo.passwordAgain = "";
          // this.registerFormVerifyInfo.passwordAgain = "只能输入字母和数字且长度为6-16位";
          this.$message.error("只能输入字母和数字且长度为6-16位");
          return;
        } else if (this.registerFormParams.password != this.registerFormParams.passwordAgain){
          this.registerFormVerify.passwordAgain = true;
          this.registerFormVerifyInfo.passwordAgain = "";
          // this.registerFormVerifyInfo.passwordAgain = "您输入的密码不一致";
          this.$message.error("您输入的密码不一致");
          return;
        } else {
          this.registerFormVerify.passwordAgain = false;
        }

        if (this.registerFormParams.randomCode == null) {
          this.$message.error("请输入验证码");
          return;
        }

        //判断验证状态
        for (let key in this.registerFormVerify){
          if(!this.registerFormVerify[key]){
            this.flag = true;
          }else{
            this.flag = false;
            break;
          }
        };
        //验证通过请求ajax
        if(this.flag){
          instance({
            method:'post',
            url:'/user/register',
            data:vm.registerFormParams
          }).then(function (data) {
            console.log(data)
            if(data.data.success){
              vm.tagClick = 1;
              vm.$message.success(data.data.msg);
            }else{
              vm.registerFormVerify.phone = true;
              vm.registerFormVerifyInfo.phone = "";
              // vm.registerFormVerifyInfo.phone = "账户已存在";
              this.$message.error("账户已存在");
              return;
            }
          })
        };


      },

      //输入框聚焦
      inputFouce:function(){
        this.registerFormVerifyInfo.phone = '';
        this.registerFormVerifyInfo.password = '';
        this.registerFormVerifyInfo.passwordAgain = '';
      },

      login: function () {
        var vm = this;
        if(!vm.formData.username) {
          this.$message.error("用户名为空！");
          return;
        }

        if(!vm.formData.password) {
          this.$message.error("密码为空！");
          return;
        }

        if(!vm.formData.captcha) {
          this.$message.error("验证码为空！");
          return;
        }
        vm.formData.token = vm.token;
        instance.post('/login', vm.formData).then(function (data) {
          if (!data.data.success) {
            vm.errorMessage  = data.data.msg;
            vm.formData.captcha = '';
            vm.getVCode();
            return;
          }
          if (data.data.data.token != null) {
            console.log(data)
            setCookie("token",data.data.data.token);
            setCookie("userName",data.data.data.user.username);
            setCookie("userId",data.data.data.user.userId);
            setCookie("index",0);
            setCookie("menuId",9999)
            vm.routerMap(data.data.data.token);
          } else {
            return;
          }
        });
      },

      routerMap(userInfo){
        let vm = this;
        if (userInfo) {
          console.log('userInfo',userInfo)
          vm.$store.dispatch('GenerateRoutes', userInfo).then(res => {
            console.log('this.$store.getters.addRouters',vm.$store.getters.addRouters);
            sessionStorage.setItem("asyncRouterMap", JSON.stringify(vm.$store.getters.addRouters));
            vm.$router.addRoutes(vm.$store.getters.addRouters) // 动态添加可访问路由表
            vm.$router.push({ path: '/' })
          })
        }
      },
      //获取验证码
      getVCode: function () {
        let vm = this;
        let params = new URLSearchParams();
        params.append('token', vm.token);
        vm.vCodeImg = '';
        instance.post('/captcha', params).then(function (data) {
          vm.vCodeImg = vm.imgPre+data.data.img;
          vm.token = data.data.token;
          console.log(vm.token)
          vm.show = false;//loading加载
        })
        console.log(this.vCodeImg)
      },

      sendCode: function () {
        let vm = this;
        var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        var r = reg.test(this.registerFormParams.phone);

        if (this.registerFormParams.phone == null) {
          this.registerFormVerify.phone = true;
          this.registerFormVerifyInfo.phone = "";
          vm.$message.error("请输入手机号");
          return;
        } else if (!r) {
          this.registerFormVerify.phone = true;
          this.registerFormVerifyInfo.phone = "";
          vm.$message.error("您输入的手机号无效");
          return;
        } else {
          this.registerFormVerify.phone = false;
        }

        this.time = 60
        this.disabled = true
        this.bgColor = '#BCBEC2'
        this.timer()

        let param = Object.assign({
          phoneNumber: this.registerFormParams.phone,
          codeType: 1
        });

        instance({
          method: 'post',
          url: '/user/getSms',
          params: param
        }).then(function (data) {
          if (data.data.success) {
            vm.$message.success("短信验证码发送成功！");
          } else {
            vm.$message.error("短信验证码发送失败！");
          }
        })
      },
      forgetSendCode: function () {
        let vm = this;
        var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        var r = reg.test(this.forgetFormParams.phone);

        if (this.forgetFormParams.phone == null) {
          vm.$message.error("请输入手机号");
          return;
        } else if (!r) {
          vm.$message.error("您输入的手机号无效");
          return;
        }

        this.forgetTime = 60
        this.forgetDisabled = true
        this.forgetBgColor = '#BCBEC2'
        this.forgetTimer()

        let param = Object.assign({
          phoneNumber: this.forgetFormParams.phone,
          codeType: 3
        });

        instance({
          method: 'post',
          url: '/user/getSms',
          params: param
        }).then(function (data) {
          if (data.data.success) {
            vm.$message.success("短信验证码发送成功！");
          } else {
            vm.$message.error("短信验证码发送失败！");
          }
        })
      },
      timer () {
        if (this.time > 0) {
          this.time--
          this.btnContent = this.time + 's后重新获取'
          setTimeout(this.timer, 1000)
        } else {
          this.time = 0
          this.bgColor = '#7B7B7B'
          this.btnContent = '获取验证码'
          this.disabled = false
        }
      },
      forgetTimer () {
        if (this.forgetTime > 0) {
          this.forgetTime--
          this.forgetBtnContent = this.forgetTime + 's后重新获取'
          setTimeout(this.forgetTimer, 1000)
        } else {
          this.forgetTime = 0
          this.forgetBgColor = '#7B7B7B'
          this.forgetBtnContent = '获取验证码'
          this.forgetDisabled = false
        }
      },

    },
    created() {
      sessionStorage.clear();
      //获取验证码
      this.getVCode();
    }
  }
</script>

<style scoped>
  .login-box,.register-box{
    position: absolute;
    top: 40%;
    right: 180px;
    transform: translate(0, -50%);
  }
  .login-box, .register-box{
    height: auto!important;
    width: 410px!important;
  }
  .login-box-body, .register-box-body{
    padding: 40px 25px;
    border-radius: 35px;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
  }
.login-page{
  background: url('../assets/login-BG.jpg') center center no-repeat;
  background-size: cover;
}
</style>
